<template>
    <div class="login-body">
        <div class="main">
            <div class="left">
                <img src="@/assets/register.png" style="width: 100%; height: 100%; border-radius: 10px;">
            </div>
            <div class="right">
                <div div class="login-font">
                    注册
                </div>
                <div style="width: 100%;">
                    <el-form :model="user" :rules="rules" ref="ruleForm">
                        <el-form-item prop="username">
                            <el-input size="medium" clearable v-model="user.username" placeholder="请输入账号">
                                <template #prefix>
                                    <i class="el-icon-user" style="font-size: 18px;padding-top: 8px;"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input size="medium" clearable show-password v-model="user.password" placeholder="请输入密码">
                                <template #prefix>
                                    <i class="el-icon-lock" style="font-size: 18px;padding-top: 8px;"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="email">
                            <el-input size="medium" clearable v-model="user.email" placeholder="请输入邮箱">
                                <template #prefix>
                                    <i class="iconfont icon-youxiang" style="font-size: 18px;padding-top: 8px;"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="val">
                            <el-input size="medium" clearable placeholder="验证码" v-model="user.val">
                                <el-button slot="append" :disabled="sendDisabled" @click="handleSendInputVal">{{ send
                                    }}</el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="medium"
                                style="margin-bottom: 0px; margin-top: 0px; width: 100%;"
                                @click="register">注册</el-button>
                            已有账号？ <span style="flex:1;cursor: pointer;color: #409eff;"
                                @click="$router.push('/login')">登录</span>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { registerAPI, sendEmailAPI } from '@/api/web'
export default {
    data() {
        return {
            send: "发送",
            sendDisabled: false,
            user: {
                username: '',//账号
                password: '',//密码
                email: '',//邮箱
                val: ''
            },

            rules: {
                username: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                    { pattern: /^\d{10}$/, message: '账号必须为十位数字', trigger: 'change' }
                ],

                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                val: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' },
                ]
            }
        }
    },
    mounted() { },
    methods: {
        async handleSendInputVal() {
            if (this.user.email.length == 0) {
                this.$message.error("请输入邮箱")
            } else {
                this.sendDisabled = true;
                // 设置初始倒计时时间  
                let countdown = 60;
                // 显示倒计时  
                const intervalId = setInterval(() => {
                    countdown--;
                    if (countdown >= 0) {
                        this.send = countdown;
                    } else {
                        // 倒计时结束后清除定时器  
                        clearInterval(intervalId);
                        this.send = "发送";
                        this.sendDisabled = false;
                    }
                }, 1000); // 每秒更新一次 
                const res = await sendEmailAPI(this.user);
                if (res.code == 200) {
                    this.$message.success("发送成功");
                    //禁止发送 
                } else {
                    this.$message.error(res.msg);
                }
            }
        },
        register() {
            this.$refs.ruleForm.validate(async (ok) => {
                if (ok) {
                    const res = await registerAPI(this.user)
                    if (res.code == 200) {
                        this.$message.success("注册成功！")
                        localStorage.setItem("login", JSON.stringify(this.user))
                        this.user.username = '',
                            this.user.password = '',
                            this.user.repassword = ''
                        this.$router.push('/login')
                    } else {
                        this.$message.error(res.msg)
                    }
                }
            })

        }
    }
}
</script>

<style>
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 97vh;
    width: 100%;
    background-image: url('@/assets/login-background.png');
    background-size: cover;
    background-position: center;

    .main {
        width: 550px;
        margin-left: 500px;
        /* 设置左边距 */
        border-radius: 10px;
        height: 70vh;
        display: flex;
        background-color: white;

        .left {
            width: 50%;
        }
    }

    .login-font {
        font-weight: bold;
        font-size: 30px;
        padding-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1ba1dc;
    }

    .right {
        margin-left: 10px;
        width: 300px;
    }

    .el-form {
        padding: 20px;
    }

    .el-form-item {
        width: 100%;
    }
}
</style>